<template>
	<view class="cart_wai" v-if="cart.length != 0">
		<my-address></my-address>
	<!-- 商品列表的标题页面 -->
		<view class="totle_list">
			<view class="cart_title">
				<view class="cart_title_left">
					<uni-icons type="shop" size="30"></uni-icons>
				</view>
				<view class="cart_title_right">
					<text>购物车</text>
				</view>
			</view>
		</view>
		<!-- 循环渲染每一个item项 -->
		
				
		
		<uni-swipe-action>
			<block v-for= "(item,index) in cart" :key="index">
			<uni-swipe-action-item :options="options" @click="swiperDelete(item)">
				<view class="cart_item">
					<view class="cart_item_left">
								<label class="radio"><radio @click="changeState(item)"  color="#f00000" :value="item.goods_name" :checked="item.goods_state" /></label>
						<image :src="item.goods_small_Logo" mode="widthFix"></image>
					</view>
					<view class="cart_item_right">
						<view class="cart_item_right_top">
							{{item.goods_name}}
						</view>
						<view class="cart_item_right_bootom">
							<view>{{item.goods_price|tofix}}</view>
							
							<uni-number-box :min="1" :max="100" :value="item.goods_count"  @change="((val)=>{handleChange(val,item)})" />
						<!-- 	<uni-number-box :min="1" :max="100" :value="item.goods_count"  @change="changeEvent($event,item)" /> -->
							
						</view>
					</view>
				</view>
						
			</uni-swipe-action-item>
			</block>
		</uni-swipe-action>
		<!-- 使用自定义的计算组件 -->
		<my-settle></my-settle>
	</view>
	<view class="nocart" v-else>
		<image src="../../static/kong.png" mode="widthFix"></image>
	</view>
</template> 

<script>
	import setBrage from "@/mixins/tabbar_badge.js"
	import {mapState,mapMutations} from "vuex"
	export default {
		data() {
			return {
				options:[
					{
						text:"删除",
						style:{
							backgroundColor:"#c00000"
						}
					}
				]
			};
		},
		mixins:[setBrage],
		computed:{
			...mapState("m_cart",["cart"])
		},
		methods:{
			...mapMutations("m_user",["updateAddress"]),
			...mapMutations("m_cart",["saveTostoresission"]),
			...mapMutations("m_cart",["updateGood_count"]),
			...mapMutations("m_cart",["deleteGoods"]),
			handleChange(val,item){
				// console.log(val,item);
				item.newCount = +val;
				this.updateGood_count(item);
				this.setBrage()
			},
			swiperDelete(item){
				
				this.deleteGoods(item);
				this.setBrage()
			},
			
		
			changeState(items){
				// items.name ="123"
				var result = this.cart.find((item)=>item.goods_id == items.goods_id);
				
				if(result){
						result.goods_state = !items.goods_state;
						
				}
					
					// console.log("更改状态");
					
			}
			
			},
		filters:{
				tofix(num ){
					var num = Number(num);
					return "￥"+num
				}
			}
		
		}
		
</script>

<style lang="scss" scoped>
	.cart_title{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;	
		box-sizing: border-box;
		padding: 0 20px;
		border-bottom:1px solid #efefef ;
		height: 40px;
	}
	.cart_title_right{
		margin-left: 10rpx;
	}
	.cart_item{
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		// height: 120rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #efefef;
		// margin-bottom: 20rpx;
		height: 150px;
		
	}
	.cart_item_left{
		width: 40%;
		height: auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.cart_item_left image{
		width: 100%;
		border-radius: 20rpx;
		// height: 200rpx;
	}
	.cart_item_right{
		width: 60%;
	}
	.cart_item_right{
		display:flex;
		height: 100%;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		color: #000;
		text-align: left;
		font-size: 14px;
		margin-left: 10px;
		padding: 20rpx 0;
		box-sizing: border-box;
	}
	.cart_item_right_bootom{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items:center;
		view{
			color: #f00000;
			font-size: 20px;
			font-weight: 400;
			// margin-right: 40rpx;
		}
	}
	.radio{
		color: #f0000;
	}
	.uni-swipe-action-item{
		margin-bottom: 20px;
	}
	.cart_wai {
		padding-bottom: 50px;
	}
	.nocart{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #efefef;
		height: 100vh;
	}
</style>
